<template>
    <div class="brand" v-if="branddata && initdata && bannerdata">
        <search :isShow="false" />
        <!-- 全部商品分类 -->
        <div class="banner">
            <div class="banner-classify">
                <p class="classify-title">
                    全部商品分类
                    <Icon class="ios-arrow-down" type="ios-arrow-down"></Icon>
                </p>
                <div class="banner-dropdown">
                    <ul>
                        <li v-for="(items,index) in initdata" :key="index">
                            <div class="menu-content">
                                <span class="jurz" @click="producone(items.proTypeOne.productTypeId,0)">{{items.proTypeOne.name}}</span>
                                <Icon class="ios-arrow-right" type="ios-arrow-right"></Icon>
                            </div>
                            <div class="menu-list">
                                <div class="item" v-for="(item) in items.productTypeResults" :key="item.id">
                                    <p class="title" @click="producone(item.proTypeTwo.productTypeId,1)">{{item.proTypeTwo.name}}</p>
                                    <div class="list">
                                        <span v-for="(ite,index) in item.proTypeThrees" :key="index" @click="producone(ite.productTypeId,2)">{{ite.name}}</span>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="menu">
                <ul>
                    <li><router-link to="/index">首页</router-link></li>
                    <li><router-link to="/building">建材商品</router-link></li>
                    <li><router-link to="furniture">家居商品</router-link></li>
                    <li class="active"><router-link to="/brand">品牌活动</router-link></li>
                    <li>
                        <a href="http://www.zhuolukeji.com/salesPrograms.html" target="_blank">整包方案</a>
                    </li>
                    <li @click="modelShow=true">户型</li>
                </ul>
            </div>
        </div>
        <!-- 轮播图 -->
        <div class="ivue-banner">
            <Carousel autoplay v-model="value1" arrow="never" loop>
                <Carousel-item v-for="item in bannerdata" :key="item.id">
                    <div class="demo-carousel" :style="`background-image:url(${item.pictureUrl})`"></div>
                </Carousel-item>
            </Carousel>
        </div>
        <!-- 品牌商城 -->
        <div class="heading">
            <h4>品牌商城</h4>
            <h6>Brand Mall</h6>
        </div>
        <!-- 家具品牌 -->
        <div class="sign" v-if="branddata">
            <p class="title">家具品牌</p>
            <div class="sign-brand">
                <div class="item" v-for="item in branddata[1]" :key="item.id">
                    <div class="itemimg"  :style="`background-image:url(${item.brandPicture})`"></div>
                    <div class="item-mask" @click="store(item.brandId)">
                        <p class="sign-store">{{item.brandName}}</p>
                        <p class="sign-major">{{item.management}}</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 建材品牌 -->
        <div class="sign" v-if="branddata">
            <p class="title">建材品牌</p>
            <div class="sign-brand">
                <div class="item" v-for="item in branddata[2]" :key="item.id">
                    <div class="itemimg"  :style="`background-image:url(${item.brandPicture})`"></div>
                    <div class="item-mask" @click="store(item.brandId)">
                        <p class="sign-store">{{item.brandName}}</p>
                        <p class="sign-major">{{item.management}}</p>
                    </div>
                </div>
            </div>
        </div>
        <model :visible.sync="modelShow" content="浏览VR户型需要下载客户端"></model>
    </div>
</template>
<script>
import Search from "../components/search.vue";
import Model from "../components/modal.vue";
import { Icon, Carousel, CarouselItem, modelShow } from 'iview';
import  {initProductType,bannerList,initBrandList} from "../http/api"
export default {
    components: {
        Icon,
        Carousel,
        CarouselItem,
        Search,
        Model
    },
    data() {
        return {
            value1: 0,
            modelShow: false,
            bannerdata:null,//轮播图数据
            initdata:null,  //类目数据
            branddata:null  //品牌类数据
        };
    },
    methods: {
        api_brand() {
            //轮播图接口
            bannerList({bannerType:3,isEnable:1,facilityType:1}).then(res =>{
                // console.log(res)
                this.bannerdata = res.data.banners
            })
            // 类目初始化接口
            initProductType().then(response =>{
                // console.log(response)
                this.initdata = response.data.productTypeResults
            })
            //品牌数据接口
            initBrandList().then(respon =>{
                this.branddata =respon.data.brands
                // console.log(this.branddata)
            })
        },
        //跳转到类目页
        producone (id,type) {
            this.$router.push({path:"/classificationlist",query:{productTypeId:id,type:type}})
        },
        store (id) {
            this.$router.push({path:"/store",query:{brandId:id}})
        }
    },
    created () {
        this.api_brand()
    }
};
</script>
<style lang="less">
@import "../assets/styles/brand.less";
</style>
